<template>
    <layout-main 
    :nav="navBindData"
    :active-nav="currentHeighLight"
    >
        <template v-for="(item, index) in data">
            <card-item 
                ref="cards"
                :key="index"
                :data="item"
            ></card-item>
        </template>
    </layout-main>

    <!-- v-if="item.title === currentHeighLight" -->
</template>

<script>
import LayoutMain from '../layout/main.vue';

import CardItem from './components/card-item.vue';

import DomInViewObserver from '../js/DomInViewObserver.js';

import HOME_MAIN_MIXIN from '../mixins/main.js';

export default {
    mixins: [HOME_MAIN_MIXIN],
    components: {
        LayoutMain,
        CardItem,
    },
    data() {
        return {
            io: null,
        };
    },
    computed: {
        navBindData() {
            // 预渲染返回的数据中，不能携带函数
            var map = this.data.map(item => {
                return {
                    ...item,
                    onclick() {
                        // 该页面特有，点击后导航滚动至相应位置
                        let {title} = item,
                            titleEl = document.querySelector(`#${title}`);

                        titleEl.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start',
                            inline: 'start',
                        });
                    },
                }
            });

            return map;
        },
    },
    methods: {
        getInfoFromQuery(cb) {
            var type = this.getQuery('type');

            if (!type) {
                return;
            }

            var title = document.querySelector(`#${type}`);

            if (!title) {
                cb && cb();
                return;
            }

            this.$nextTick(() => {
                title.scrollIntoView({
                    behavior: 'auto',
                    block: 'start',
                    inline: 'start',
                });

                cb && cb();
            });

            this.currentHeighLight = type;
        },
    },
    created() {
        
    },
    mounted() {
        this.getInfoFromQuery(() => {
            this.io = new DomInViewObserver({
                el: '.right-main .card-item .header',
                handler: id => {
                    this.currentHeighLight = id;
                },
            });
        });
    },
    beforeDestroy() {
        this.io.destroy();
    },
};
</script>

<style lang="scss" scoped>

</style>